import ImagePreview from '@components/ImagePreview'
import { useFormCallback } from '@hooks/useFormCallback'
import {
  useBannerCreateMutation,
  useBannerDetailQuery,
  useBannerUpdateMutation,
} from '@services/banner'
import { Link } from '@tanstack/react-router'
import { Breadcrumb, Button, Form, Input, InputNumber, Switch } from 'antd'
import { useEffect, useState } from 'react'
import { FormCard } from './FormCard'

const defaultData = {
  title: '',
  description: '',
  image: null,
  link: null,
  orderby: 0,
  hide: false,
}

/**
 * @param {Object} options
 * @param {Number} options.id
 * @returns
 */
export function FormBanner({ id }) {
  const [loading, setLoading] = useState(true)
  const { data: bannerData } = useBannerDetailQuery(id)

  const [data, setData] = useState(defaultData)
  const [form] = Form.useForm()

  const { mutate } = id ? useBannerUpdateMutation() : useBannerCreateMutation()
  const { onFinish, onFailed } = useFormCallback(mutate, {
    handle: (values) => ({
      ...values,
      ...(id && { id }),
    }),
  })

  useEffect(() => {
    if (id < 0) return
    id && bannerData && setData(bannerData)
    form.setFieldsValue({ ...defaultData, ...bannerData })
    setLoading(false)
  }, [id, bannerData])

  if (loading) return <div>loading...</div>

  const card = {
    title: (
      <Breadcrumb
        items={[{ title: <Link to={'..'}>轮播管理</Link> }, { title: id ? '编辑' : '新增' }]}
      />
    ),
  }
  return (
    <FormCard card={card}>
      <Form
        name="form-banner"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: '100%' }}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFailed}
        autoComplete="off">
        <Form.Item
          label="轮播图"
          name="image"
          rules={[{ required: true, message: '请上传轮播图' }]}>
          <ImagePreview
            aspect="11:5"
            url={data.image}
            onChange={(resp) => {
              setData((prev) => ({ ...prev, image: resp.url }))
              form.setFieldsValue({ image: resp.url }) //触发表单更新
            }}
          />
        </Form.Item>

        <Form.Item label="标　　题" name="title">
          <Input />
        </Form.Item>
        <Form.Item label="描　　述" name="description">
          <Input.TextArea rows={3} />
        </Form.Item>
        <Form.Item
          label="链接地址"
          name="link"
          rules={[
            { pattern: /^https?:\/\//, message: '请输入正确的链接地址, 请包含http://或https://' },
          ]}>
          <Input />
        </Form.Item>
        <Form.Item label="排　　序" name="orderby" width={'206px'}>
          <InputNumber className="w-[206px]!" min={0} />
        </Form.Item>
        <Form.Item label="是否隐藏" name="hide">
          <Switch checkedChildren="隐藏" unCheckedChildren="显示" />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            保 存
          </Button>
        </Form.Item>
      </Form>
    </FormCard>
  )
}
